<div

           style="float: left; width: 45%; padding: 3em;">

          <button data-bind="click: addClick"> add </button>

          <button data-bind="click: deleteClick"> delete </button>

        </div>

​

        <div

           style="float: right; width: 45%; padding: 3em;">

          Export files<br>

          <button data-bind="click: exportAllHTML"> copy of everything as HTML </button><br>

          <button data-bind="click: exportAllZIP"> copy of everything as ZIP </button><br>

          <button data-bind="click: exportCurrentFile"> currentFile </button><br>

          <br>

​

          Import files<br>

          <button data-bind="click: importText"> text file import </button><br>

          <button data-bind="click: importBase64"> binary file import (base64) </button><br>

          <button data-bind="click: importZIP"> import a whole ZIP archive </button><br>

​

        </div>

​

      </div>

​

    </div>

​

  </div>

</div>

​

<div class=teapo-status-bar

   data-bind="loadRaw: docHostRegions.status = $element">

</div>

​

<script data-legit=teapo>try { teapo.app.start(); } catch (err) { alert(err+' '+err.stack); }</script>

​

<script data-legit=teapo type="text/javascript" src="https://getfirebug.com/firebug-lite.js">

{

    overrideConsole: true,

    startInNewWindow: false,

    startOpened: true

}

</script>

​

​

</body>

</html>

​